import React, { Component } from "react";

// 导入评论列表组件
import List from "./list";

// 导入组件样式
import "./index.css";

class Index extends Component {
  // js逻辑
  state = {
    // 评论人
    name: "",
    // 评论内容
    content: "",
    // 评论列表=》假数据（模拟）
    list: [
      { id: 0, name: "特朗普", content: "我要买疫苗！" },
      { id: 1, name: "普京", content: "我不卖你！" },
    ],
  };

  // 处理表单双向绑定
  handlerPub = (e) => {
    // console.log(e.target.name, e.target.value);
    this.setState({
      // key:val
      [e.target.name]: e.target.value,
    });
  };

  // 发表评论
  public = () => {
    // 获取评论数据
    // console.log(this.state);
    const { name, content, list } = this.state;
    // 边界判断
    if (!name || !content) {
      return alert("评论人或内容不能为空！");
    }
    // 刷新评论列表
    this.setState({
      list: [{ id: list.length, name, content }, ...list],
      // 清空上次输入
      name: "",
      content: "",
    });
  };

  // 模版
  render() {
    return (
      <div className="box">
        <h1>评论</h1>
        {/* 发表评论 */}
        <div className="pub">
          <p>
            {/* 评论人 */}
            <input
              name="name"
              value={this.state.name}
              onChange={this.handlerPub}
              type="text"
            />
          </p>
          <p>
            {/* 评论内容 */}
            <textarea
              name="content"
              value={this.state.content}
              onChange={this.handlerPub}
            />
          </p>
          <p>
            <button onClick={this.public} className="btn">
              发表评论
            </button>
          </p>
        </div>
        {/* 评论列表 */}
        <hr className="line" />
        {/* 通过父传子把数据传递给子组件 */}
        <List list={this.state.list} abc="123" />
      </div>
    );
  }
}

export default Index;
